<template>
    <div>
        <div class="search">
            <div class="searchLeft">



                <div class="searchLable">日期：</div>
                <div>
                    <el-date-picker v-model="query.date" type="date" placeholder="请选择日期" @keyup.enter.native="handleSearch"
                        value-format="yyyy-MM-dd">
                    </el-date-picker>
                </div>
                <div class="searchLable">运动员：</div>
                <div>
                    <el-input v-model="query.athleteName" placeholder="请输入运动员" class="searchInput"
                        @keyup.enter.native="handleSearch"></el-input>
                </div>
                <div class="searchLable">赛艇模型：</div>
                <div>
                    <el-input v-model="query.boat" placeholder="请输入赛艇模型" class="searchInput"
                        @keyup.enter.native="handleSearch"></el-input>
                </div>
                <div class="searchLable">训练地点：</div>
                <div>
                    <el-input v-model="query.loc" placeholder="请输入训练地点" class="searchInput"
                        @keyup.enter.native="handleSearch"></el-input>
                </div>
                <div class="searchLable">教练：</div>
                <div>
                    <el-input v-model="query.coach" placeholder="请输入教练名字" class="searchInput"
                        @keyup.enter.native="handleSearch"></el-input>
                </div>
                <div>
                    <el-button type="primary" size="small" icon="icon_admin icon-gonggongtubiao_sousuo"
                        @click="handleSearch" class="searchBtn">查询</el-button>
                </div>

            </div>
        </div>




        <div class="search">
            <div class="searchLeft">
                <div class="searchLable">训练类型：</div>
                <div class="searchLable">
                    赛艇
                </div>
                <div class="edit_btn">
                    <el-button size="small" class="searchBtn" type="primary" @click="openUploadDialog">上传数据</el-button>
                </div>
            </div>

        </div>




        <div class="table-container">
            <el-table :data="tableData" style="width: 100%" v-loading="loading" element-loading-text="拼命加载中"
                element-loading-spinner="el-icon-loading" class="tableBox">

                <el-table-column label="运动员" prop="athleteName" show-overflow-tooltip></el-table-column>
                <el-table-column label="训练时间" prop="date" show-overflow-tooltip></el-table-column>
                <el-table-column label="赛艇艇型" prop="boat" show-overflow-tooltip></el-table-column>
                <el-table-column label="训练地点" prop="loc" show-overflow-tooltip></el-table-column>
                <el-table-column label="风向" prop="windDirection" show-overflow-tooltip></el-table-column>
                <el-table-column label="教练名字" prop="coach" show-overflow-tooltip></el-table-column>
                <el-table-column label="训练方案" prop="trainingEvent" show-overflow-tooltip></el-table-column>
                <el-table-column label="训练采样次数" prop="sampleCount" show-overflow-tooltip></el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button type="primary" size="mini" @click="goDetails(scope.row)">详情</el-button>
                    </template>
                </el-table-column>
                <template slot="empty" v-if="!tableData.length">
                    <div
                        style="
                                                                                                                                                                                                                                              height: 500px;
                                                                                                                                                                                                                                              display: flex;
                                                                                                                                                                                                                                              flex-direction: column;
                                                                                                                                                                                                                                              justify-content: center;
                                                                                                                                                                                                                                              align-items: center;
                                                                                                                                                                                                                                            ">
                        <i class="icon_admin icon-gonggongtubiao_konghezi"></i>
                        <div style="font-size: 14px" v-show="searchKey == 0">空空如也 ~</div>
                        <div style="font-size: 14px" v-show="searchKey == 1">查询无数据，请重新输入查询条件</div>
                    </div>
                </template>
            </el-table>
        </div>

        <!-- <div class="foot">
            <div class="pagination-container">
                <el-pagination background v-show="tableData.length" @size-change="handleSizeChange"
                    @current-change="handleCurrentChange" layout="total,prev, pager, next, sizes,jumper"
                    :page-size="page.size" :page-sizes="[10, 50, 100]" :current-page.sync="page.current"
                    :total="total"></el-pagination>
            </div>
        </div> -->

        <!-- 上传训练数据弹窗 -->
        <el-dialog title="上传训练数据" :visible.sync="isOpenUpload" append-to-body center width="516px">
            <el-form label-width="120px" :model="uploadForm" ref="uploadForm" :rules="rules">
                <el-form-item label="运动员：" prop="athleteName">
                    <el-input placeholder="请输入运动员" size="small" v-model.trim="uploadForm.athleteName"
                        maxlength="20"></el-input>
                </el-form-item>
                <el-form-item label="赛艇艇型：" prop="boat">
                    <el-input placeholder="请输入赛艇艇型" size="small" v-model.trim="uploadForm.boat" maxlength="20"></el-input>
                </el-form-item>
                <el-form-item label="训练地点：" prop="loc">
                    <el-input placeholder="请输入训练地点" size="small" v-model.trim="uploadForm.loc" maxlength="20"></el-input>
                </el-form-item>
                <el-form-item label="风向" prop="windDirection">
                    <el-input placeholder="请输入风向" size="small" v-model.trim="uploadForm.windDirection"
                        maxlength="20"></el-input>
                </el-form-item>
                <el-form-item label="教练名字：" prop="coach">
                    <el-input placeholder="请输入教练名字" size="small" v-model.trim="uploadForm.coach" maxlength="20"></el-input>
                </el-form-item>
                <el-form-item label="训练方案：" prop="trainingEvent">
                    <el-input placeholder="请输入训练方案" size="small" v-model.trim="uploadForm.trainingEvent"
                        maxlength="20"></el-input>
                </el-form-item>
                <el-form-item label="训练采样次数：" prop="sampleCount">
                    <el-input placeholder="请输入训练采样次数" size="small" v-model.number="uploadForm.sampleCount"
                        maxlength="20"></el-input>
                </el-form-item>

                <el-form-item label="训练日期：" prop="date">
                    <el-date-picker type="date" placeholder="请选择日期" v-model="uploadForm.date" value-format="yyyy-MM-dd"
                        style="width: 100%;"></el-date-picker>
                </el-form-item>




                <el-form-item label="上传训练数据：" prop="upload">
                    <el-upload class="avatar-uploader" :http-request="handleUpload" :on-success="uploadSuccess"
                        action="https://jsonplaceholder.typicode.com/posts/" :limit="1" :on-remove="handleRemove"
                        :before-upload="beforeUpload" accept=".xlsx">
                        <el-button size="small" type="primary">点击上传</el-button>
                        <div slot="tip" class="el-upload__tip">请输入xlsx文件</div>
                    </el-upload>
                </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="isOpenUpload = false">取消</el-button>
                <el-button type="primary" @click="onSubmit">确定</el-button>
            </div>
        </el-dialog>




    </div>
</template>
<script>
import { getTrainListApi, uploadTrainFileApi } from "@/api/specializedTraining"


export default {
    data() {
        let uploadValidator = (rule, value, callback) => {
            if (this.uploadForm.excel == "") {
                callback(new Error("请上传文件"));
            } else {
                callback();
            }
        };
        return {

            query: {
                date: "",
                athleteName: "",
                boat: "",
                loc: "",
                coach: ""
            },
            loading: false,
            searchKey: 0,

            page: {
                size: 10,
                current: 1
            },
            total: 0,
            tableData: [],

            //弹窗
            isOpenUpload: false,
            uploadForm: {
                excel: "",
            },
            FileList: [],
            rules: {
                athleteName: [{ required: true, message: "请输入运动员", trigger: "blur" }],
                boat: [{ required: true, message: "请输入赛艇艇型", trigger: "blur" }],
                loc: [{ required: true, message: "请输入训练地点", trigger: "blur" }],
                windDirection: [{ required: true, message: "请输入风向", trigger: "blur" }],
                coach: [{ required: true, message: "请输入教练名字", trigger: "blur" }],
                trainingEvent: [{ required: true, message: "请输入训练方案", trigger: "blur" }],
                sampleCount: [{ required: true, message: "请输入训练采样次数", trigger: "blur" }],
                date: [{ required: true, message: "请选择日期", trigger: "blur" }],
                upload: [
                    { required: true, validator: uploadValidator, trigger: "change" }
                ]
            },

        };
    },
    created() {
        this.onload(this.query);

    },

    methods: {



        onload(query) {
            this.loading = true;

            // 深拷贝
            let params = JSON.parse(JSON.stringify(query));

            for (var i in params) {
                if (params[i] == "") {
                    params[i] = "NULL";
                }
            }
            getTrainListApi(params).then(res => {

                this.tableData = res.trainingDataList;
                // this.loading = false;
            });
            this.loading = false;


        },
        // //分页
        // handleCurrentChange(val) {
        //     this.page.current = val;
        //     this.onload(this.page, this.query);
        // },
        // handleSizeChange(val) {
        //     this.page.size = val;
        //     this.onload(this.page, this.query);
        // },



        //查询
        handleSearch() {
            this.searchKey = 1;
            this.page.current = 1;
            this.onload(this.query);
        },

        //打开上传弹窗
        openUploadDialog() {
            this.isOpenUpload = true;
        },

        handleUpload(file) {
            this.uploadForm.excel = file.file;
        },
        handleRemove(file, fileList) {
            this.uploadForm.excel = "";
        },
        uploadSuccess() {
            debugger
        },
        beforeUpload() { },

        //提交上传文件
        onSubmit() {
            this.$refs["uploadForm"].validate(valid => {
                if (valid) {
                    let formData = new FormData();
                    for (var i in this.uploadForm) {
                        formData.append(i, this.uploadForm[i])
                    }

                    uploadTrainFileApi(formData).then(res => {
                        debugger;
                        if (res.trainingId) {
                            this.$message({
                                type: "success",
                                message: "上传成功!"
                            });
                            this.isOpenUpload = false;
                            this.onload(this.query);
                            this.uploadForm = {
                                excel: "",
                            }
                        }
                    });
                }
            });
        },





        //详情
        goDetails(row) {
            this.$router.push({
                path: "/specializedTraining/details",
                query: {
                    trainingId: row.trainingId
                }
            });
        }
    }
};
</script>
<style lang="scss">
.pieDom {
    height: 223px;
    background-color: #fff;
}
</style>